<template>
	<div class="navbar-container">
		<div class="navbar" :style="{ filter: themeEnum[theme] }">
			<img class="navbar-logo" src="../assets/logo.png" />
			<div class="navbar-userinfo">
				<img class="user-avatar" :style="{ filter: themeEnum[theme] }" src="../assets/avatar_01.png" />
				<div class="user-info">
					<span class="user-name">{{ user.userName }}</span>
					<span class="user-num">{{ user.userDept }}</span>
				</div>
			</div>
			<el-button class="navbar-btn" v-if="isOut" @click="handleLogout">退出登录</el-button>
		</div>
		<div class="navbar-placeholder"></div>

		<div class="nav-moblie" :style="{ backgroundColor: bgColor }">
			<i class="el-icon-arrow-left" @click="onBack"></i>
			<div class="mobile-title">{{ title || '实时视频处理系统' }}</div>
			<div class="mobile-logout" v-if="isOut" @click="handleLogout">退出</div>
		</div>

	</div>
</template>

<script>
import {
	userLogout
} from '@/api'
export default {
	props: {
		bgColor: String,
		title: {
			type: String,
			default: ''
		},
		isOut: {
			type: Boolean,
			default: true
		},
		theme: {
			type: String,
			default: 'light' // default 默认 dark 暗黑模式
		}
	},
	data() {
		return {
			themeEnum: {
				light: '',
				dark: 'invert(85%) hue-rotate(180deg)'
			}
		}
	},
	computed: {
		user() {
			return this.$store.state.user
		}
	},
	methods: {
		handleLogout() {
			this.$confirm('确认是否退出登录？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				showCancelButton: true,
				center: true
			}).then(() => {
				this.onLoginout()
			})
		},
		async onLoginout() {
			try {
				await userLogout()
			} catch (e) {
				console.error(e)
			}
			this.$store.dispatch('LOGOUT')
			this.$router.push({
				path: '/'
			})
		},
		onBack() {
			let path = this.$route.path == '/room' ? '/list' : '/'
			this.$router.push(path)
		}
	}
}
</script>

<style lang="scss" scoped>
.navbar-placeholder {
	height: 9.26vh;
	min-height: 56px;
}

.navbar {
	position: fixed;
	top: 0;
	display: flex;
	align-items: center;
	width: 100%;
	height: 9.26vh;
	min-height: 72px;
	background: #FFFFFF;
	box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.12), 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
	z-index: 999;

	.navbar-logo {
		margin-left: 5vw;
		width: 10.8vw;
		height: 4.8vh;
		object-fit: contain;
	}

	.navbar-userinfo {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-right: 40px;

		.user-avatar {
			width: 3.2vw;
			height: 4.54vh;
			object-fit: contain;
			max-width: 46px;
			max-height: 46px;
			border-radius: 50%;
		}

		.user-info {
			margin-left: 10px;
			display: flex;
			flex-direction: column;
		}

		.user-name {
			font-size: 16px;
			font-weight: 500;
			color: #333333;
		}

		.user-num {
			font-size: 12px;
			font-weight: 400;
			color: #999999;
		}
	}

	.navbar-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 5vw;
		width: 96px;
		height: 30px;
		background: #1A77F0;
		border-radius: 3px;
		font-size: 12px;
		font-weight: 500;
		color: rgba(255, 255, 255, 0.9);
		line-height: 24px;
	}
}

.nav-moblie {
	display: none;
	position: fixed;
	top: 0;
	width: 100vw;
	padding: 0 20px;
	min-height: 56px;
	line-height: 56px;
	text-align: center;
	background: #FFFFFF;
	color: #999999;
	// box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.12), 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
	z-index: 999;

	.mobile-title {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.mobile-logout {
		color: red;
	}
}

/*定义竖屏 css*/
@media screen and (orientation:portrait) {
	.navbar {
		display: none;
	}

	.navbar-placeholder {
		height: 56px;
	}

	.nav-moblie {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
</style>